<template>
  <a-card title="个人信息" :bordered="false" class="info-card">
    <div class="content-wrapper">
      <a-row :gutter="32">
        <!-- 左侧信息列 -->
        <a-col :span="32">
          <div class="info-item">
            <span class="info-label">账号：</span>
            <span class="info-content">{{ data.no }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">平台联系人：</span>
            <span class="info-content">{{ data.name }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">平台联系方式：</span>
            <span class="info-content">{{ data.phone }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">上次登录：</span>
            <span class="info-content">{{ data.loginTime }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">IP地址：</span>
            <span class="info-content">{{ data.lIp }}</span>
            <a-alert :message="message" :type="type" show-icon class="alert-tip" />
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue'
  import { workspaceApi } from '/@/api/business/b-operation/workspace/workspace-api'

  const props = defineProps({
    id: {
      type: String,
      required: true,
    },
  })

  const data = ref([])
  const message = ref('')
  const type = ref('')
  async function perInfo() {
    const param = reactive({
      id: props.id,
    })
    const queryResult = await workspaceApi.getInfo(param)

    data.value = queryResult.data
    //data.login属性将时间戳转为日期格式
    data.value.loginTime = data.value.loginTime ? formatCustomDateTime(new Date(data.value.loginTime)) : '首次登录，没有登录记录'
    data.value.lIp = data.value.lIp ? data.value.lIp : '未知'
    //判断data.isAllowIp属性，如果为true，提示正常，如果为false，提示异常
    if (!data.value.isAllowIp || data.value.isAllowIp) {
      message.value = '正常'
      type.value = 'info'
    } else {
      message.value = '上次登录异常，请及时修改密码'
      type.value = 'error'
    }
  }

  function formatCustomDateTime(date) {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')

    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}` // 自定义格式
  }

  onMounted(perInfo)
</script>

<style lang="less" scoped>
  .info-card {
    width: 100%;
    border-radius: 8px;

    :deep(.ant-card-head) {
      border-bottom: none;
      padding: 0 24px;
      margin-top: 10px;

      .ant-card-head-title {
        font-size: 18px;
        font-weight: 700;
      }
    }
  }

  .content-wrapper {
    margin: -12px 48px;
  }

  .info-item {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;

    .info-label {
      width: 100px;
      flex-shrink: 0;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }

    .info-content {
      color: rgba(0, 0, 0, 0.65);
      flex: 1;
    }
  }

  .alert-tip {
    margin-left: 40px;
    margin-top: -8px;
    border-radius: 4px;

    :deep(.ant-alert-message) {
      font-size: 12px;
    }
  }

  .status-col {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;

    .status-tag {
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
    }
  }
</style>
